<!-- 手机端首页 -->
<script setup>
import { ref } from 'vue'
const homePage_swiper_img_list = ref([
  '/src/assets/photo/1.jpg',
  '/src/assets/photo/2.jpg',
  '/src/assets/photo/3.jpg',
  '/src/assets/photo/4.jpg'
])
//公告列表
const homePage_notice_list = ref(['公告1内容', '公告2内容', '公告3内容'])
//优秀员工列表
const homePage_article_list = ref([
  {
    id: '1',
    avatar_img: '/src/assets/photo/5.jpg',
    title: '党的18大会议精神',
    time: '2021-09-10',
    viewing_frequency: 532,
    content:
      '18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、概括和延伸。18大精神， 是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、概括和延伸。18大'
  },
  {
    id: '2',
    avatar_img: '/src/assets/photo/6.jpg',
    title: '街道第十次会议,胜利结束，庆祝庆祝社会革命胜利的100周年,伟大的共产事业万岁',
    time: '2021-02-10',
    viewing_frequency: 132,
    content:
      '18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、概括和延伸。'
  },
  {
    id: '3',
    avatar_img: '/src/assets/photo/7.jpg',
    title: '员工工作会',
    time: '2021-09-10',
    viewing_frequency: 232,
    content: '18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、'
  },
  {
    id: '4',
    avatar_img: '/src/assets/photo/5.jpg',
    title: '街道第十次会议,胜利结束，庆祝庆祝社会革命胜利的100周年,伟大的共产事业万岁',
    time: '2021-02-10',
    viewing_frequency: 132,
    content: '18大精神，是“三个代表”思想的'
  },
  {
    id: '5',
    avatar_img: '/src/assets/photo/6.jpg',
    title: '员工工作会',
    time: '2021-09-10',
    viewing_frequency: 232,
    content: '18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、'
  },
  {
    id: '6',
    avatar_img: '/src/assets/photo/7.jpg',
    title: '员工工作会',
    time: '2021-09-10',
    viewing_frequency: 232,
    content: '18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个代表”思想的集中、'
  },
  {
    id: '7',
    avatar_img: '/src/assets/photo/5.jpg',
    title: '员工工作会',
    time: '2021-09-10',
    viewing_frequency: 232,
    content: '18大精神，是“三个代表”思想的集中、概括和延伸。18大精神，是“三个'
  }
])
</script>
<template>
  <div class="home_page_subject">
    <div class="subject_title">
      <!-- 京东组件的轮播图 -->
      <nut-swiper
        :init-page="2"
        :auto-play="3000"
        pagination-visible
        pagination-color="#426543"
        pagination-unselected-color="#808080"
      >
        <nut-swiper-item
          v-for="(item, index) in homePage_swiper_img_list"
          :key="index"
          style="height: 150px"
        >
          <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
        </nut-swiper-item>
      </nut-swiper>
    </div>
    <!-- 公告栏 -->
    <nut-noticebar
      direction="vertical"
      :list="homePage_notice_list"
      :speed="10"
      :stand-time="3000"
      close-mode
    />
    <!-- 文章内容 -->
    <div class="article_body" v-for="item in homePage_article_list" :key="item.id">
      <div class="header_article">
        <!-- 文章标题 -->
        <div class="article_header_title">
          <div class="article_title_text">{{ item.title }}</div>
          <div class="article_content_viewing">{{ item.viewing_frequency }}位同事看过</div>
        </div>
        <!-- 文章图片 -->
        <div class="article_header_img">
          <nut-avatar shape="square" size="large">
            <img :src="item.avatar_img" alt="" />
          </nut-avatar>
        </div>
      </div>
      <!-- 点赞观看次数 -->
      <div class="footer_article">
        <div>时间：{{ item.time }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home_page_subject {
  overflow: auto;
  .subject_title {
    margin: 1px 0px 0px 0px;
  }
  .article_body {
    width: calc(100% - 20px);
    min-height: 80px;
    margin: 5px 0px;
    padding: 10px;
    background-color: #fff;

    .header_article {
      display: flex;
      justify-content: space-between;

      margin: 2px 0px;
      .article_header_title {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .article_title_text {
          font-size: 18px;
          font-weight: 600;
        }
        .article_content_viewing {
          font-size: 14px;
        }
      }
      .article_header_img {
        img {
          border-radius: 5px;
        }
      }
    }
    .footer_article {
      height: 28px;
      line-height: 28px;
      border-top: 1px solid #a5a6a5;
    }
  }
}
</style>
